@charset "utf-8";
@import "reset";
@import "header";
@import "common";
@import "footer";

section{
//  min-width: 500px;
    margin-top: 50px;
    @media(min-width:$pad){
        margin-top: 42px;
    }
    @media(min-width:$min-pc){
        margin-top: 50px;
    }
    .container{
        width: 1002px;
    }
    .bluebg{
        width: 100%;
        background-color: #2b80da;
        .index-warp{
            width: 67.36%;
            padding-top: 45.62%;
            position: relative;
            margin: 0 auto;
            img{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                &:hover{
                    opacity: .7;
                }
            }
        }
    }
    @media(max-width:1002px){
        .container{
        width: auto;
        }
    }
//  引擎部分
   .enginebg{
       width: 100%;
       background-color: #fbfaf7;
   }
    .engine{
//      background-color: #fbfaf7;
        padding-top: 108px;
        padding-bottom: 100px;
//      width: 100%;
        .title {
            p:first-of-type{
                font-size: 47px;
                height: 48px;
                color: #0078d7;
                font-weight: bold;
                animation: slideInDown 1s linear 1s forwards;
                opacity: 0;
            }
            p:nth-of-type(2){
                color: #666666;
                font-size: 30px;
                margin-top: 39px;
                animation: slideInDown 1s linear 1.5s forwards;
                opacity: 0;
            }
                
            @media(max-width:768px){
                p:first-of-type{
//                  margin-top: 20px;
                    font-size: 20px;
                }
            }
            @media(max-width:768px){
                p:nth-of-type(2){
                    font-size: 25px;
                    margin-top: 20px;
                    
                }
            }
            
        }
        
        .content{
            animation: slideInDown 1s linear 2s forwards;
                opacity: 0;
            .cell{
                margin-top: 79px;
                font-size: 0;
//              text-align: center;
                .cellleft{
                    width: 64px;
                    height: 64px;
                    position: relative;
                    background-color: $maincolor;
                    border-radius: 3px;
                    transform: rotate(0);
                    transition: all 0.5s;
                    &:hover{
                            transform: rotate(360deg);
                            transition: all 1s;
                            background-color: gray;
                        }
                    img{
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        position: absolute;
                        
                        
                    }
                }
                
                .cellright{
                    margin-left: 14px;
                    p:first-of-type{
                        width: 163px;
                        font-size: 19px;
//                      text-align: center;
                        
                    }
                    p:nth-of-type(2){
                        width: 182px;
                        font-size: 14px;
                        line-height: 24px;
                        margin-top: 10px;
                        color: #666666;
                    }
                    @media(max-width:1200px){
                        p:nth-of-type(2){
                            width: 375px;
                        }
                    
                    }
                    @media(max-width:992px){
                        p:nth-of-type(2){
//                          width: 300px;
                        } 
                       
                    }
                    @media(max-width:768px){
                        p:nth-of-type(2){
                            width: auto;
                        } 
                       
                    }
                    
                    
                    
                
                
            }
            
            
                @media(max-width:768px){
                    .cellleft{
                        display: block;
                        margin: 0 auto;
                        float: none;
//                      text-align: center;
//                      width: auto;
                    }
                    .cellright{
                        float: none;
                        p:first-of-type{
                            text-align: center;
                            width: auto;
                        }
                        p:nth-of-type(2){
                            width: auto;
                            text-align: center;
                        }
                    }
                    
                }
        }
        
        
        
    }
    .phone-warp{
            width: 365px;
            padding-top: 464px;
            position: relative;
            img{
                position: absolute;
                width: 100%;
                height: 100%;
                display: block;
                top: 0;
                left: 0;
                
            }
            
        } 
        @media(max-width:768px){
                .phone-warp{
                    display: none;
//                  margin-top: 25px;
                }
            }
    
    
}

//  优势部分
    .advantage{
        padding-bottom: 105px;
        .row{
            
            .adv-img{   
                width: 303px;
                height: 295px;
                position: relative;
                margin-top: 190px;
                img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
            }
            @media(max-width:768px){
                .adv-img{
                    margin-top: 80px;
                }
                
            }
            
            
            .adv-content{
                
                &>p{
                    font-size: 47px;
                    color: #8fc31f;
                    margin-top: 114px;
                    font-weight: bold;
                }
                @media(max-width:768px){
                    &>p{
                        font-size: 25px;
                        text-align: center;
//                      display: inline-block;
//                      width: 36px;
                        margin: 8px auto 0 auto;
                    }
                }
                .adv{
                    height: 54px;
                    margin-top: 16px;
                    font-size: 14px;
                    line-height: 54px;
                    &:first-of-type{
                        margin-top: 45px;
                    }
                    .right-warp{
                        width: 54px;
                        height: 54px;
                        margin-right: 10px;
                        position: relative;
                        img{
                            position: absolute;
                            display: block;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                        }
                        
                    }
//                  @media(max-width:768px){
//                      margin: 0 auto;
//                  }
                    
                }
                @media(max-width:768px){
                        .adv{
                            line-height: 25px; 
                            margin-top: 10px;
                            &:first-of-type{
                            margin-top: 25px;
                    }
                        }
                    }
                
                @media(max-width:992px){
                    font-size: 12px;
                    
                }
                
            }
            
            @media(max-width:992px){
                
                .adv-img{
                    width: 200px;
                    height: 194.72px; 
                }
            }
            
            
        }
    }
    
    .blue{
        background-color: #0079d7;
        padding-bottom: 146px;
        
//      padding-top: 111px;
        .container{
            .title{
                color: white;
                font-size: 48px;
                margin-top: 111px;
//              margin:0 auto;
            }
            @media(max-width:992px){
                .title{
                    font-size: 42px;
                    
                }
            }
            @media(max-width:768px){
                .title{
                    font-size: 25px;
                    text-align: center;
                    
                }
            }
            .pro-cell{
                .pro-icon{
                    position: relative;
                    width: 66px;
                    height: 66px;
                    margin-top: 79px;
                    img{
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                    }
                }
                
                p:first-of-type{
                    font-size: 25px;
                    line-height: 25px;
                    color: white;
                    margin-top: 72px;
                }
                p:nth-of-type(2){
                    font-size: 14px;
                    color: white;
                    line-height: 29px;
                    margin-top: 10px;
                    width: 280px;
                }
                @media(max-width:1200px){
                    p:nth-of-type(2){
                    width: 250px;
                    }
                }
                @media(max-width:992px){
                    p:nth-of-type(2){
                    width: 200px;
                    }
                }
                @media(max-width:768px){
                    p:nth-of-type(2){
                    width: auto;
                    }
                    p:first-of-type{
                    text-align: center;
                }
                }
                
            }
        }
    }
    @media(max-width:768px){
        .blue{
            padding-bottom: 90px;
        }
    }
    
    
//  游戏
    .game{
        padding-top: 26px;
        padding-bottom: 54px;
        .g-title{
            margin-top: 86px;
            p:first-of-type{
                font-size: 34px;
            }
            p:nth-of-type(2){
                font-size: 14px;
                line-height: 34px;
            }
            @media(max-width:$pad){
                p:first-of-type{
                    font-size: 1.5em;
                }
                p:nth-of-type(2){
                    display: none;
                }
            }
        }
//      @media(max-width:$pad){
//          margin-top: 26px;
//      }
    }
    @media(max-width:$pad){
        
    }
//游戏结束
//底部开始
    .g-bottom{
        margin-top: 49px;
        video{
            width: 370px;
            height: 200px;
            border-radius: 5px;
        }
        
        @media(max-width:$min-pc){ 
            video{
                height: auto;
            }
        }
        @media(max-width:$pad){
            video{
                float: none;
                display: block;
                margin: 0 auto 15px auto;
            }
        }
        .games{
            .g-cell{
                text-align: center;
                .g-warp{
                    width: 67px;
                    height: 67px;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        &:hover{
                            opacity: .7;
                        }
                    }
                }
            }
            
            @media(max-width:$pc){ 
                .g-cell{
                    
                    .g-warp{
                        margin: 0 auto;
                        float: none;
                    }
                }
            }
            
            
//          @media(min-width:$pc){  
//              .g-cell{
//                  width: 97px; 
//                  .g-warp{
//                      margin: 0 auto;
//                      float: none;
//                  }
//              }
//          }
            
        }
    }
//底部结束 


    .greybg{
        width: 100%;
        padding-top: 41px;
        padding-bottom: 64px;
        background-color: #f4f4f4;
        .firend{
            .title{
                font-size: 29px;
                span{
                    font-size: 12px;
                }
            }
            .firends{
                margin-top: 13px;
                .f-warp{
                    &:hover{
                        opacity: 0.7;
                    }
//                  box-sizing: content-box;
                    width: 150px;
                    padding-top: 64px;
                    position: relative;
                    margin-top: 20px;
//                  margin-left: 7px;
//                  margin-right: 7px;
//                  padding: 3px;
//                  margin: 0 auto;
                    border: 1px solid #dddddd;
                    background-color: white;
                    border-radius: 5px;
                    img{
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                }
                @media(max-width:620px){
                    .f-warp{
                        width: 100%;
//                      padding-top: 12.8%;
                        padding-top: 42.67%;
//                      height: auto;
                    }
                }
                
            }
            
        }
        
        
    }
}
